searchInput();
switchTabs();
excellentVideo();

function searchInput() {
  // 获取input输入框
  const inputSearch = document.getElementById("J_input-search");
  // 获取关键词列表
  const keywordList = document.getElementById("J_keyword-list");
  // 监听获取焦点事件
  inputSearch.addEventListener("focus", function () {
    keywordList.classList.add("show");
  });

  //  阻止事件冒泡
  inputSearch.addEventListener("click", function (e) {
    e.stopPropagation();
  });

  // 任一位置点击时，隐藏关键词列表
  document.addEventListener("click", function () {
    keywordList.classList.remove("show");
  });
}

const mySwiper = new Swiper("#swiper1", {
  direction: "horizontal", // 水平切换选项
  autoplay: {
    delay: 3000,
    stopOnLastSlide: false,
    disableOnInteraction: true,
    pauseOnMouseEnter: true,
  },
  loop: true, // 循环模式选项

  // 如果需要分页器
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },

  // 如果需要前进后退按钮
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

// 推荐歌单切换tab

function switchTabs() {
  // 获取所有的tabs元素
  const tabButtons = document.querySelectorAll("#J_tab-header li");
  // 遍历所有的tabs,并给它们添加事件
  const length = tabButtons.length;
  const tabContentItems = document.querySelectorAll(
    "#J_tab-content .tab-content-item"
  );
  // console. Log(tabButtons);

  // console. Log(tabButtons[1]);

  //遍历所有的tabButtons，给他们添加事件
  for (let i = 0; i < length; i++) {
    //执行这里的代码

    tabButtons[i].addEventListener("mouseover", function () {
      //将所有li上面的 class="active"中的active移除
      for (let j = 0; j < length; j++) {
        tabButtons[j].classList.remove("active");
        //还要将所有的tab-content-item全部隐藏
        // tabcontentitems[j].style.display="none";
        tabContentItems[j].classList.remove("active");
      }

      //给他自己加上 class='active'
      // tabContentItems[i].styte.display = "block";
      tabButtons[i].classList.add("active");
      //然后将i对应素引的tab-content-item这一项显示
      tabContentItems[i].classList.add("active");
    });
  }
}

function excellentVideo() {
  //获取所有的img-container
  const imgContainers = document.querySelectorAll(".video-list .img-container");
  // console.log(imgContainers);

  // 获取遮罩层
  const videoMask = document.getElementById("J_video-mask");

  // 获取关闭按钮
  const closeButton = document.getElementById("J_close-button");

  // 获取视频标签
  const video = document.getElementById("videoElement");

  // 遍列每一个img-container
  // 获取关闭按扭
  for (let i = 0; i < imgContainers.length; i++) {
    imgContainers[i].addEventListener("click", function () {
      // 点击后要做的事情
      // 显示黑色的半透明的遮罩层
      videoMask.style.display = "block";

      //获取当前元素身上的自定义属性data-video-urL的值
      const videoUrl = this.dataset.videoUrl;
      video.src = videoUrl;
      video.play();
    });
  }

  closeButton.addEventListener("click", function () {
    //点击后要半遮罩层;
    videoMask.style.display = "none";
    video.pause();
  });
}
